<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>支持4种类型的jQuery轮播图插件EasySlides|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" /><!--CSS RESET-->
	<!-- <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">演示页面样式，使用时可以不引用 -->
	<link href="css/jquery.easy_slides.css" rel="stylesheet" type="text/css" />
	<style type="text/css">
		.slider_circle_10,.slider_four_in_line{
			width: 960px;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<!-- <div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>支持4种类型的jQuery轮播图插件EasySlides <span>Versatile Touch-enabled Slider Plugin With jQuery</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201804075062.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="htmleaf-content">
			<h2>One Big Picture</h2>
			    <div class="slider slider_one_big_picture">
			        <div>1</div>
			        <div>2</div>
			        <div>3</div>
			        <div>4</div>
			        <div>5</div>
			        <div>6</div>
			        <div>7</div>
			        <div>8</div>
			        <div>9</div>
			        <div class="next_button"></div>
			        <div class="prev_button"></div>
			        <div class="nav_indicators"></div>
			    </div>
			    <hr>

			    <h2>One Big 2</h2>
			    <div class="slider slider_one_big_2">
			        <div>1</div>
			        <div>2</div>
			        <div>3</div>
			        <div>4</div>
			        <div>5</div>
			        <div>6</div>
			        <div>7</div>
			        <div>8</div>
			        <div>9</div>
			        <div class="nav_indicators"></div>
			    </div>
			    <hr>
			    <h2>Circle</h2>
			    <div class="slider slider_circle_10">
			        <div>1</div>
			        <div>2</div>
			        <div>3</div>
			        <div>4</div>
			        <div>5</div>
			        <div>6</div>
			        <div>7</div>
			        <div>8</div>
			        <div>9</div>
			        <div class="next_button"></div>
			        <div class="prev_button"></div>
			    </div>
			    <hr>

			    <h2>4 in line</h2> -->
			    <div class="slider slider_four_in_line">
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div><img src="../imgs/75cfba1ec641388eabc3ae5464ff1d27.jpg" alt=""></div>
			        <div class="next_button"></div>
			        <div class="prev_button"></div>
			    </div>
			    <!-- <hr> -->

			    <!-- <h2>Clock</h2>
			    <div class="slider slider_clock">
			        <div>1</div>
			        <div>2</div>
			        <div>3</div>
			        <div>4</div>
			        <div>5</div>
			        <div>6</div>
			        <div>7</div>
			        <div>8</div>
			        <div>9</div>
			        <div class="next_button"></div>
			        <div class="prev_button"></div>
			    </div>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201803245038.html">
			  <img src="related/1.jpg" width="300" alt="jquery 3d Carousel轮播图插件"/>
			  <h3>jquery 3d Carousel轮播图插件</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201801014907.html">
			  <img src="related/2.jpg" width="300" alt="jquery简单轮播图代码"/>
			  <h3>jquery简单轮播图代码</h3>
			</a>
		</div>
	</div>
	 -->
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script src="js/jquery.easy_slides.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
	            $('.slider_one_big_picture').EasySlides({
	                'autoplay': true,
	                'stepbystep': false,
	                'show': 5,
	                'loop': true
	            })
	            $('.slider_one_big_2').EasySlides({
	                'autoplay': false,
	                'stepbystep': true,
	                'show': 5,
	                'loop': true
	            })
	            $('.slider_circle_10').EasySlides({
	                'autoplay': true,
	                'show': 13
	            })
	            $('.slider_four_in_line').EasySlides({
	                'autoplay': true,
	                'show': 9
	            })
	            $('.slider_clock').EasySlides({
	                'autoplay': true,
	                'stepbystep': false,
	                'show': 15
	            })
	        });
	</script>
</body>
</html>